let con1 = document.querySelector('.echarts-1')
let e1 = echarts.init(con1)
e1.setOption({
    title: {
        text: '每月收入',
    },
    legend: {
        data: ['当前每月收入', '同期每月收入'],
        top: 30,
        itemWidth: 30,
        itemHeight: 12
    },
    xAxis: {
        data: ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12']
    },
    yAxis: {
        type: 'value',
        min: 1500,
        max: 5000,
        splitNumber: 7,
        // 取消分隔线
        splitLine: {
            show: true
        },
        axisLabel: {
            show: true,
            formatter: '{value}'
        }
    },
    series: [
        {
            name: '当前每月收入',
            color: '#7f9ddd',
            type: 'bar',
            data: [2600, 1550, 1600, 3650, 4600, 3500, 1600, 2500, 2200, 1700, 3800, 1650]
        },
        {
            name: '同期每月收入',
            color: '#c3e7ff',
            type: 'bar',
            data: [2050, 1600, 1900, 3000, 4000, 3700, 1800, 2000, 2550, 3750, 3700,3650]
        }
    ]
})

let con2 = document.querySelector('.echarts-2')
let e2 = echarts.init(con2)
e2.setOption({
    title: {
        text: '每年收入走势',
    },
    legend: {
        data: ['每年收入走势', '每年同期收入走势'],
        top: 30,
        itemWidth: 30,
        itemHeight: 12
    },
    xAxis: {
        data: [2009, 2010, 2011, 2012, 2013, 2014, 2015, 2016, 2017, 2018, 2019, 2020]
    },
    yAxis: {
        type: "value",
        min: 20,
        max: 80,
        splitNumber: 6,
        splitLine: {
            show: true
        }
    },
    series: [
        {
            name: '每年收入走势',
            type: 'line',
            data: [50, 55, 60, 40, 45, 40, 65, 40, 68, 20, 72, 60],
            smooth: true,
            symbol: 'circle',
            itemStyle: {
                normal: {
                    color: '#67cb00',
                    lineStyle: { width: 1 }
                }
            }
        },
        {
            name: '每年同期收入走势',
            type: 'line',
            data: [48, 50, 52, 48, 40, 35, 65, 45, 58, 30, 72, 57],
            symbol: 'circle',
            smooth: true,
            itemStyle: {
                normal: {
                    color: 'gainsboro',
                    lineStyle: { width: 1 }
                }
            }
        }
    ]
})

